﻿package test {
	import extremefx.events.EventArgs;
	import extremefx.geom.Size;
	import extremefx.storage.LoadQeue;
	import extremefx.ui.Button;
	import extremefx.ui.Container;
	import extremefx.ui.Label;
	import extremefx.ui.RectangleComponent;
	import extremefx.ui.StyleManager;
	import extremefx.ui.UIParameters;
	import extremefx.ui.UIStage;
	import extremefx.ui.layout.TableLayout;
	
	import flash.display.Sprite;
	import flash.events.Event;
	
	/*FDT_IGNORE*/
	import gpi.skin.arrowDown;
	/*FDT_IGNORE*/

	/**
	 * @author Marcelo Volmaro
	 */
	 
	[Frame(factoryClass="extremefx.Preloader")];
	public class TableLayoutDemo extends Sprite {
		private var _cont:Container;

		private var _loader:LoadQeue;

		public function main():void {
			UIStage.init(this.stage);
			
			_loader = new LoadQeue();
			StyleManager.init(_loader);
			_loader.onQeueComplete.add(doWork);
			
			stage.addEventListener(Event.RESIZE, resizeStage);
/*FDT_IGNORE*/			
//includes the skin assets...
			var a:gpi.skin.arrowDown;
			var b:gpi.skin.arrowLeft;
			var c:gpi.skin.arrowRight;
			var d:gpi.skin.arrowUp;
			var e:gpi.skin.buttons;
			var f:gpi.skin.buttonTabFocus;
			var g:gpi.skin.checkbox;
			var h:gpi.skin.dropDown;
			var i:gpi.skin.genericTabFocus;
			var j:gpi.skin.hScrollBar;
			var k:gpi.skin.hThumb;
			var l:gpi.skin.input;
			var m:gpi.skin.inputBackground;
			var n:gpi.skin.itemList;
			var o:gpi.skin.itemListBack;
			var p:gpi.skin.listItem;
			var q:gpi.skin.radio;
			var r:gpi.skin.vScrollBar;
			var s:gpi.skin.vThumb;
/*FDT_IGNORE*/
		}
		
		private function doWork(pSender:LoadQeue, pArgs:EventArgs):void {
			var c:Container = _cont = new Container();
			
			var layout:XML = 
			<table hmargin="10" vmargin="10" hspacing="5" vspacing="5">
				<col width="75" />
				<col width="*" />
				<col />
				<tr>
					<td>button1</td>
					<td colspan="2" rowspan="4">memo</td>
				</tr>
				<tr>
					<td>button2</td>
				</tr>
				<tr>
					<td>button3</td>
				</tr>
				<tr height="*">
					<td />
				</tr>
				<tr>
					<td colspan="2">text</td>
					<td>button4</td>
				</tr>
			</table>;
			
//			var tl:TableLayout = new TableLayout("10,10,5,5;,75	,*,@;@,button1,memo,-;@,button2,|,;@,button3,|,;*,,|,;@,text,-,button4");
			var tl:TableLayout = new TableLayout(layout);

			var l:Label = new Label("text1<br><a href='http://www.aa.com'>te<b>xt2</b></a><br>mas texto<br>y mas texto", 
				((new UIParameters())));
			
//			l.multiline = true;
			
			c.add(new Button("Button 1"), "button1");
			c.add(new RectangleComponent("memo"), "memo");
			c.add(new Button("Button 2"), "button2");
			c.add(new Button("Button 3"), "button3");
			c.add(l, "text");
			c.add(new Button("Button with a very long text inside"), "button4");
			c.layoutManager = tl;

			c.attachToDisplay(UIStage.STAGE);
			resizeStage();
		}

		private function resizeStage(event:Event = null):void {
			_cont.size = new Size(stage.stageWidth - 1, stage.stageHeight - 1);
		}
	}
}
